<template>
  <div class="qr-code">
    <div v-if="item.account">
      账号：{{ item.account }}
    </div>
    <img style="width: 200px" :src="src" alt="">
    <div v-if="item.status && item.status === 'success'">
      <div>账号登录中</div>
      <el-button type="primary" size="mini" @click="syncData()">同步数据</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'QrCode',
  props: {
    item: {
      type: Object,
      default: () => {
        return {}
      }
    },
    src: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      statusMap: {
        'success': '同步数据成功',
        'danger': '失败'
      }
    }
  },
  mounted() {
    // this.$message.success('登录成功')
  },
  methods: {
    syncData() {
      this.$emit('sync')
    }
  }
}
</script>

<style lang="scss" scoped>
.qr-code {
  width: 30%;
  margin: 16px;
  padding: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  flex-direction: column;
}
</style>
